<template>
	<view class="page">
		<headnav leftText="预售选购"></headnav>
		<scroll-view scroll-y="true"  class="scroll-v pageScroll">
		  <view class="pageBox">
			  <view class="d-items">
			  	<view class="d-d-title">
			  		{{detial.alias}}
			  	</view>
			  	<view class="d-d-m">
			  		<image src="/static/img/shijian.png" mode="" class="imageIcon"></image>
			  		<text>订购时间：{{detial.start_time}}至{{detial.end_time}}</text>
			  	</view>
			  	<view class="d-d-m">
			  		<image src="/static/img/car.png" mode="" class="imageIcon"></image>
			  		<text>发货时间：{{detial.delivery_date}}</text>
			  	</view>
			  </view>
			  <view class="notics block blockPading">
			  	<view class="n-title">
			  		购买须知
			  	</view>
			  	<view class="n-content">
			  		<view class="p" :class="{'close':open}">
			  			<rich-text :nodes="detial.detail"></rich-text>
					</view>
			  		<view class="s-p">
			  			<view class="openBtn" @tap="togleOpen" v-if="detial.detail && detial.detail.length > 200">
			  				<text v-if="open">展开</text> <image src="/static/img/down.png" v-if="open" mode="" class="upDownIcon"></image>
			  				<text v-if="!open">收起</text> <image src="/static/img/up.png" v-if="!open" mode="" class="upDownIcon"></image>
			  			</view>
			  		</view>
			  	</view>
			  </view>
			  
			  <view class="goodBook block">
			  	<view class="g-title">
			  		可选书目
			  	</view>
			  	<view class="g-items">
			  		<view class="g-item" v-for="(item,index) in goods" :key='index' v-if="item.is_buy != 1">
			  			<view class="g-i-top">
			  				<view class="g-i-top-name">
			  				       {{item.name}}
			  				</view>
			  				<view class="g-i-top-b">
			  					<text class="inline">课程代码：{{item.code}}</text>
			  					<text class="inline">授课老师：{{item.teacher}}</text>
			  				</view>
			  			</view>
			  			<view class="g-i-bottom">
			  				<view class="checkBox" @tap="checkBox(item)">
								<image src="/static/img/checkedIcon.png" v-show="item.is_selected == 1" class="checkIcon" mode=""></image>
			  					<image src="/static/img/checkIcon.png"  v-show="item.is_selected != 1"class="checkIcon" mode=""></image>
			  				</view>
			  				<view class="g-i-bottom-info">
			  					<view class="g-i-name">
			  						<text v-if="type == 1">【预售】</text> {{item.name}}
			  					</view>
			  					<view class="Old_price" v-if="type == 1">
			  						预计售价 ¥ {{item.total_price}} / 件
			  					</view>
			  					<view class="prce">
			  					   <text v-if="type == 1">【预售】</text> ¥ {{item.prepayment}}
			  					</view>
			  					<view class="uNumberBox">
			  						<u-number-box  :value="item.num" :disabledInput="true" :disabled="true"
			  							:min="min" :max="max" bgColor="#f3f4f6" :longPress="false"
			  							@change="countChange($event,index)" />
			  					</view>
			  				</view>
			  			</view>
			  		</view>
			  	</view>
			  </view>
		  </view>
		</scroll-view>
		<view class="totelBotttom">
			<view class="checkAll" @tap="checkAllbtn">
				<image src="/static/img/checkIcon.png" class="checkIcon" mode="" v-show="!allcheck"></image>
				<image src="/static/img/checkedIcon.png" class="checkIcon" mode=""  v-show="allcheck"></image>
				<text>全选</text>
			</view>
			<!-- <view class="tot-m">
				合计: <text class="rmb">¥</text><text class="price">11.00</text>
			</view> -->
			<view class="tot-m2 tot-m3">
				<view class="tot-pr" :class="{'paddingTop':type == 0}">
					合计: <text class="rmb" style="margin-right: 2rpx;">¥ </text><text class="price">{{totalPrice}}</text>
				</view>
				<view class="warn" v-show="type == 1">
					预付款不可退
				</view>
			</view>
			<view class="btn" @tap='goComfirm'>
				立即下单
			</view>
		</view>
	</view>
</template>
<script>
	import { goodsDetial, detialGoods, creatOrder } from '@/api/goods.js'
	import { getWxCode, getOpenId } from '@/api/user.js'
	import Cache  from '@/util/cache.js'
	export default {
		data() { 
			return {
				totalPrice:0,
				allcheck:true,
				id:'',
				min:1,
				max:100,
				detial:{},
				goods:[],
				type:'', //1预售 2.非预售
				open:true
			}
		},
		onLoad() {
			// console.log(this.user);
			const query = this.$Route.query;
			this.id = query.id;
			this.GoodsDetial();
			
		},
		methods: {
			async  goComfirm() {
				// uni.showLoading({title: '加载中'});
				if(this.totalPrice == 0) {
					return uni.showToast({
						title:'请选择商品！',
					    icon:"none"
					})
				}
				let goods_ids = {}
				let is_selectGoods = this.goods.filter(item  => item.is_selected  == 1);
			    // console.log(is_selectGoods);
				is_selectGoods.forEach((item) => {
					goods_ids[item.goods_id] = item.num
				})
			
				const post_data = {
					activity_id:this.id,
					goods_ids:JSON.stringify(goods_ids),
					student_id:this.user.student_id 
				}
				
			    const orderObj = {
			    	...this.detial,
			    	goods:is_selectGoods,
					post_data
			    }
		       
			     Cache.set('order',orderObj)
			     this.$Router.push('/pages/payOrder/payOrder')
				
				// const res = await creatOrder(post_data)
				// if(res.status_code == 200) {
					
					// console.log(res.data.order);
					// console.log(res.data.order);
					
				// }
			},
			async GoodsDetial() {
				const { data } = await goodsDetial(this.id)
				this.detial = data.activity;
				this.type = this.detial.is_presale;
				this.DetialGoods();
			},
			async DetialGoods() {
				const { data } = await detialGoods(this.id)
				this.goods =  data.map((item) => {
					if(this.type == 1) {
						return {
							goods_id:item.goods_id,
						    is_required:item.is_required,
							name:item.name,
							num:1,
							code:item.course_info.code,
							teacher:item.course_info.teacher,
							show_name:item.show_name,
							is_selected:item.is_selected,
							total_price:item.total_price,
							prepayment:item.prepayment,
							dan_prepayment:item.prepayment
						}
					} else {
						 // console.log(data);
						return {
							goods_id:item.goods_id,
						    is_required:item.is_required,
							name:item.name,
							num:1,
							code:item.course_info.code,
							teacher:item.course_info.teacher,
							show_name:item.show_name,
							is_selected:item.is_selected,
							total_price:item.total_price,
							prepayment:item.pay_price,
							dan_prepayment:item.pay_price
						}
					}
				});
				this.reudcePrice();
			},
			checkBox(item) {
				if(item.is_required == 0) {
					item.is_selected = !item.is_selected;
					this.$nextTick(() => {
						const array = this.goods.filter(item  => item.is_selected  == 1);
						if(array.length == this.goods.length) {
							this.allcheck = true
						}
						if(array.length == 0) {
							this.allcheck = false
						}
	
						this.reudcePrice();
					})
				}
			},
			reudcePrice(){
				const filtered = this.goods.filter(item  => item.is_selected  == 1);
				if(filtered.length == 0) {
					this.totalPrice = 0;
				} else {
					const prices = filtered.map(item => item.prepayment);
					//console.log(prices);
					const sum = prices.reduce((acc,  curr) => Number(acc) + Number(curr), 0);
					this.totalPrice = sum.toFixed(2);
				}
			},
			scrolltolower() {
				
			},
			togleOpen() {
				this.open = !this.open;
			},
			gochangeSchool() {
				uni.navigateTo({
					url:'/pages/changeSchool/changeSchool'
				})
			},
			countChange(e,type) {
				// console.log(type);
				var value = Number(e.value);
				const newPrice = value * this.goods[type].dan_prepayment;
				this.$set(this.goods[type],'prepayment',newPrice.toFixed(2));
				this.$nextTick(() => {
					this.$set(this.goods[type],'num',value);
					this.reudcePrice();
				})
			},
			checkAllbtn() {
				console.log(123);
				if(!this.allcheck) {
					this.allcheck = true;
					this.goods.forEach((item) => {
						if(!item.is_required) {
							this.$set(item,'is_selected',true)
						}
					})
				} else {
					this.allcheck = false;
					this.goods.forEach((item) => {
						if(!item.is_required) {
							this.$set(item,'is_selected',false)
						}
					})
				}
				
			    
				this.$nextTick(() => {
					const array = this.goods.filter(item  => item.is_selected  == 1);
					if(array.length == this.goods.length) {
						this.allcheck = true
					}
					this.reudcePrice();
				})
			},
			getTotle() {
				
			},
			change(e) {
				this.swiper.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/detial.scss";
	.page {
		background-color: #f5f8fa;
		width: 100%;
		height: 100%;
	}
	.pageBox {
		padding-bottom: 130rpx;
	}
	.notics {
		border-radius: 26rpx;
		background-color: #fff;
		margin-bottom: 40rpx;
		.s-p {
			overflow: hidden;
			margin-bottom: 10rpx;
		}
		.n-title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		.n-content {
			.p {
				font-size: 27rpx;
				line-height: 38rpx;
				margin-bottom: 10rpx;
				&.close {
					height:38rpx;
					@include text
					white-space: normal;
				}
			}
			.openBtn {
				float: right;
				font-size: 24rpx;
			}
			.upDownIcon {
				width: 22rpx;
				height: 14rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>
